<template>
  <div>
    <div :id="domId" style="padding: 20px" v-loading="loading">
      <div class="header">
        <div>{{ reportInfo && reportInfo.title }}</div>
        <div class="title">浙江求是心血管病医院</div>
        <div class="subTitle">院外血压监测报告</div>
      </div>
      <div class="table" v-if="reportInfo">
        <div style="height: 990px; border: 1px solid #000; margin-bottom: 40px">
          <div class="firstLine">
            <div class="item">
              <div>姓名</div>
              <div>{{ reportInfo && reportInfo.name }}</div>
            </div>
            <div class="item">
              <div>编号</div>
              <div>{{ reportInfo && reportInfo.no }}</div>
            </div>
            <div class="item">
              <div>报告生成时间</div>
              <div>{{ reportInfo && reportInfo.createTime }}</div>
            </div>
          </div>
          <div class="secndLine">
            <div class="left">汇总数据</div>
            <div class="right">
              血压单位: <span>mmHg</span> 脉搏单位: <span>BPM</span>
            </div>
          </div>
          <div class="tableBox">
            <div class="tableTitle">
              全程
              <span>
                （{{ reportInfo && reportInfo.startTime }} ~
                {{ reportInfo && reportInfo.endTime }}）</span
              >
            </div>
            <div class="tableInfo">
              <div class="th">
                <div></div>
                <div>最大值</div>
                <div>最小值</div>
                <div>平均值</div>
              </div>
              <div class="tr">
                <div>收缩压</div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.total &&
                      reportInfo.total.shrink_max &&
                      reportInfo.total.shrink_max.shrink
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.total &&
                        reportInfo.total.shrink_max &&
                        reportInfo.total.shrink_max.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.total &&
                      reportInfo.total.shrink_min &&
                      reportInfo.total.shrink_min.shrink
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.total &&
                        reportInfo.total.shrink_min &&
                        reportInfo.total.shrink_min.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      (reportInfo.total &&
                        reportInfo.total.shrink_avg &&
                        reportInfo.total.shrink_avg.toFixed(0)) ||
                      0
                    }}
                  </span>
                </div>
              </div>
              <div class="tr">
                <div>舒张压</div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.total &&
                      reportInfo.total.diastole_max &&
                      reportInfo.total.diastole_max.diastole
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.total &&
                        reportInfo.total.diastole_max &&
                        reportInfo.total.diastole_max.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.total &&
                      reportInfo.total.diastole_min &&
                      reportInfo.total.diastole_min.diastole
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.total &&
                        reportInfo.total.diastole_min &&
                        reportInfo.total.diastole_min.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      (reportInfo.total &&
                        reportInfo.total.diastole_avg &&
                        reportInfo.total.diastole_avg.toFixed(0)) ||
                      0
                    }}
                  </span>
                </div>
              </div>
              <div class="tr">
                <div>脉搏</div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.total &&
                      reportInfo.total.heart_rate_max &&
                      reportInfo.total.heart_rate_max.heartRate
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.total &&
                        reportInfo.total.heart_rate_max &&
                        reportInfo.total.heart_rate_max.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.total &&
                      reportInfo.total.heart_rate_min &&
                      reportInfo.total.heart_rate_min.heartRate
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.total &&
                        reportInfo.total.heart_rate_min &&
                        reportInfo.total.heart_rate_min.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      (reportInfo.total &&
                        reportInfo.total.heart_rate_avg &&
                        reportInfo.total.heart_rate_avg.toFixed(0)) ||
                      0
                    }}
                  </span>
                </div>
              </div>
            </div>
            <div class="tableTitle" v-if="reportInfo.morning">
              清晨
              <span> （06:00:00 ~ 09:00:00）</span>
            </div>
            <div class="tableInfo" v-if="reportInfo.morning">
              <div class="th">
                <div></div>
                <div>最大值</div>
                <div>最小值</div>
                <div>平均值</div>
              </div>
              <div class="tr">
                <div>收缩压</div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.morning &&
                      reportInfo.morning.shrink_max &&
                      reportInfo.morning.shrink_max.shrink
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.morning &&
                        reportInfo.morning.shrink_max &&
                        reportInfo.morning.shrink_max.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.morning &&
                      reportInfo.morning.shrink_min &&
                      reportInfo.morning.shrink_min.shrink
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.morning &&
                        reportInfo.morning.shrink_min &&
                        reportInfo.morning.shrink_min.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      (reportInfo.morning &&
                        reportInfo.morning.shrink_avg &&
                        reportInfo.morning.shrink_avg.toFixed(0)) ||
                      0
                    }}
                  </span>
                </div>
              </div>
              <div class="tr">
                <div>舒张压</div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.morning &&
                      reportInfo.morning.diastole_max &&
                      reportInfo.morning.diastole_max.diastole
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.morning &&
                        reportInfo.morning.diastole_max &&
                        reportInfo.morning.diastole_max.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.morning &&
                      reportInfo.morning.diastole_min &&
                      reportInfo.morning.diastole_min.diastole
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.morning &&
                        reportInfo.morning.shrink_min &&
                        reportInfo.morning.shrink_min.createTime,
                      "{mm}-{dd} {hh}:{mm}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      (reportInfo.morning &&
                        reportInfo.morning.diastole_avg &&
                        reportInfo.morning.diastole_avg.toFixed(0)) ||
                      0
                    }}
                  </span>
                </div>
              </div>
              <div class="tr">
                <div>脉搏</div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.morning &&
                      reportInfo.morning.heart_rate_max &&
                      reportInfo.morning.heart_rate_max.heartRate
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.morning &&
                        reportInfo.morning.heart_rate_max &&
                        reportInfo.morning.heart_rate_max.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.morning &&
                      reportInfo.morning.heart_rate_min &&
                      reportInfo.morning.heart_rate_min.heartRate
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.morning &&
                        reportInfo.morning.heart_rate_min &&
                        reportInfo.morning.heart_rate_min.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      (reportInfo.morning &&
                        reportInfo.morning.heart_rate_avg &&
                        reportInfo.morning.heart_rate_avg.toFixed(0)) ||
                      0
                    }}
                  </span>
                </div>
              </div>
            </div>
            <div class="tableTitle">
              晚间
              <span> （18:00:00 ~ 23:59:59）</span>
            </div>
            <div class="tableInfo">
              <div class="th">
                <div></div>
                <div>最大值</div>
                <div>最小值</div>
                <div>平均值</div>
              </div>
              <div class="tr">
                <div>收缩压</div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.evening &&
                      reportInfo.evening.shrink_max &&
                      reportInfo.evening.shrink_max.shrink
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.evening &&
                        reportInfo.evening.shrink_max &&
                        reportInfo.evening.shrink_max.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.evening &&
                      reportInfo.evening.shrink_min &&
                      reportInfo.evening.shrink_min.shrink
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.evening &&
                        reportInfo.evening.shrink_min &&
                        reportInfo.evening.shrink_min.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      (reportInfo.evening &&
                        reportInfo.evening.shrink_avg &&
                        reportInfo.evening.shrink_avg.toFixed(0)) ||
                      0
                    }}
                  </span>
                </div>
              </div>
              <div class="tr">
                <div>舒张压</div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.evening &&
                      reportInfo.evening.diastole_max &&
                      reportInfo.evening.diastole_max.diastole
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.evening &&
                        reportInfo.evening.diastole_max &&
                        reportInfo.evening.diastole_max.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.evening &&
                      reportInfo.evening.diastole_min &&
                      reportInfo.evening.diastole_min.diastole
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.evening &&
                        reportInfo.evening.diastole_min &&
                        reportInfo.evening.diastole_min.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      (reportInfo.evening &&
                        reportInfo.evening.diastole_avg &&
                        reportInfo.evening.diastole_avg.toFixed(0)) ||
                      0
                    }}
                  </span>
                </div>
              </div>
              <div class="tr">
                <div>脉搏</div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.evening &&
                      reportInfo.evening.heart_rate_max &&
                      reportInfo.evening.heart_rate_max.heartRate
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.evening &&
                        reportInfo.evening.heart_rate_max &&
                        reportInfo.evening.heart_rate_max.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      reportInfo.evening &&
                      reportInfo.evening.heart_rate_min &&
                      reportInfo.evening.heart_rate_min.heartRate
                    }}
                  </span>
                  ({{
                    parseTime(
                      reportInfo.evening &&
                        reportInfo.evening.heart_rate_min &&
                        reportInfo.evening.heart_rate_min.createTime,
                      "{mm}-{dd} {hh}:{ii}"
                    )
                  }})
                </div>
                <div>
                  <span style="font-weight: bold">
                    {{
                      (reportInfo.evening &&
                        reportInfo.evening.heart_rate_avg &&
                        reportInfo.evening.heart_rate_avg.toFixed(0)) ||
                      0
                    }}
                  </span>
                </div>
              </div>
            </div>
            <!-- <div class="info">
              <div>记录次数：13</div>
              <div>有效次数：13</div>
              <div>收缩压超过界限：0.00%</div>
              <div>舒张压超过界限：0.00%</div>
            </div> -->
          </div>
          <div class="secndLine">
            <div class="left">结论</div>
          </div>
          <el-input
            v-model="reportInfo.result"
            :rows="4"
            type="textarea"
            placeholder="请输入结论"
          />
        </div>
        <div
          style="height: 1090px; border: 1px solid #000; margin-bottom: 40px"
        >
          <div class="tit">{{ reportInfo && reportInfo.title }}</div>
          <div class="secndLine">
            <div class="left">全程血压监测数据清单</div>
            <div class="right">
              血压单位: <span>mmHg</span> 脉搏单位: <span>BPM</span>
            </div>
          </div>
          <div class="blueTableBox">
            <div class="tableInfo">
              <div class="th">
                <div style="width: 6%">编号</div>
                <div style="width: 20%">昼夜区间</div>
                <div style="width: 30%">日期</div>
                <div style="width: 11%">时间</div>
                <div style="width: 11%">收缩压</div>
                <div style="width: 11%">舒张压</div>
                <div style="width: 11%; border: none">脉搏</div>
              </div>
              <div
                v-for="(item, index) in reportInfo.list"
                :key="index"
                class="tr"
              >
                <div style="width: 6%">{{ index + 1 }}</div>
                <div style="width: 20%">昼夜区间</div>
                <div style="width: 30%">
                  {{ parseTime(item.createTime, "{yy}-{mm}-{dd}") }}
                </div>
                <div style="width: 11%">
                  {{ parseTime(item.createTime, "{hh}：{ii}") }}
                </div>
                <div style="width: 11%">{{ item.shrink }}</div>
                <div style="width: 11%">{{ item.diastole }}</div>
                <div style="width: 11%">{{ item.heartRate }}</div>
              </div>
            </div>
          </div>
        </div>
        <div style="height: 1000px; border: 1px solid #000">
          <div class="tit">{{ reportInfo && reportInfo.title }}</div>
          <div class="secndLine">
            <div class="left">{{ chatText }}</div>
          </div>
          <div :id="chartId" class="lineChat"></div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 20px">
      <el-button size="small" type="primary" @click="save"> 保存 </el-button>
      <el-button size="small" type="primary" @click="download">
        下载
      </el-button>
    </div>
  </div>
</template>
<script>
import { updateReport } from "@/api/qiushi/equipment/qiushreport";
import { uploadPDF } from "@/api/login";
import * as echarts from "echarts";
export default {
  data() {
    return {
      loading: false,
      chatText: "",
      chatOption: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        legend: {
          data: ["收缩压", "舒张压", "脉搏"],
          right: "1%",
          top: 10,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: [
          {
            // 第一种方式
            type: "value",
            name: "血压[mmHg]",
            position: "left",
            axisLabel: {
              formatter: "{value}",
            },
          },

          {
            //第二种方式

            type: "value",
            name: "脉搏[次/分]",
            position: "right",
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "收缩压",
            type: "line",
            stack: "Total",
            yAxisIndex: 0,
            data: [],
          },
          {
            name: "舒张压",
            type: "line",
            stack: "Total",
            yAxisIndex: 0,
            data: [],
          },

          {
            name: "脉搏",
            type: "line",
            stack: "Total",
            yAxisIndex: 1,
            data: [],
          },
        ],
      },
    };
  },
  props: ["reportInfo", "domId", "chartId"],
  created() {
    this.loading = true;
    this.$nextTick(() => {
      const charts1 = document.getElementById(this.chartId);
      let myEcharts1 = echarts.init(charts1);
      let dateBox = [];
      let sbpBox = [];
      let dbpBox = [];
      let sBox = [];
      this.reportInfo.list.forEach((item) => {
        dateBox.push(this.parseTime(item.takeTime, "{mm}.{dd}"));
        dbpBox.push(item.diastole);
        sbpBox.push(item.shrink);
        sBox.push(item.heartRate);
      });

      this.chatOption.xAxis.data = dateBox;
      this.chatText = `血压趋势图（${
        this.reportInfo && this.reportInfo.startTime
      }  ~
                  ${this.reportInfo && this.reportInfo.endTime}
                ）`;
      this.chatOption.series[0].data = sbpBox;
      this.chatOption.series[1].data = dbpBox;
      this.chatOption.series[2].data = sBox;
      myEcharts1.setOption(this.chatOption);
    });
    this.loading = false;
  },
  methods: {
    async save() {
      this.loading = true;
      const PDF = await this.getPdf(this.domId);
      let formdata = new FormData();
      // 赋值需要传递的文件-添加到formdata对象中
      formdata.append("file", PDF.output("blob"));
      const res1 = await uploadPDF(formdata);
      updateReport({ id: this.reportInfo.id, reportUrl: res1.url }).then(
        (response) => {
          this.$modal.msgSuccess("修改成功");
          this.$emit("resetPdfToSave");
          this.loading = false;
        }
      );
    },
    async download() {
      const PDF = await this.getPdf(this.domId);
      PDF.save(this.reportInfo.title + "血压监测报告" + ".pdf");
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  text-align: center;

  .title {
    font-size: 26px;
  }
  .subTitle {
    margin: 10px 0;
    font-size: 22px;
  }
}
.table {
  .firstLine {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #000;
    .item {
      width: 33.33%;
      text-align: center;
      & > div {
        margin: 6px 0;
      }
    }
  }
  .secndLine {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #dbecf4;
    font-size: 20px;
    padding: 8px 10px;

    .left {
      font-size: 18px;
    }
    .right {
      font-size: 16px;
      span {
        font-weight: bold;
      }
    }
  }
  .tableBox {
    padding: 8px;
    margin-top: 20px;
    .tableTitle {
      margin-top: 5px;
      position: relative;
      padding-left: 10px;
      margin-bottom: 10px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: -4px;
        height: 25px;
        width: 3px;
        background: #004d99;
      }
    }
    .tableInfo {
      .th,
      .tr {
        text-align: center;
        background: #f0f0f0;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #000;
        font-size: 15px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #333333;
        padding: 10px 0;
        & > div {
          width: 25%;
        }
      }
      .tr {
        background: #fff;
      }
    }
    .info {
      display: flex;
      border-bottom: 1px dashed #d3d3d3;
      padding-bottom: 5px;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 22px;
      margin-top: 20px;
      & > div {
        margin-right: 20px;
      }
    }
  }
  .blueTableBox {
    padding: 10px;
    .tableInfo {
      border: 1px solid #ebeef5;
      color: #000;
      text-align: center;
    }
    .th {
      display: flex;
      align-items: center;
      background: #57a0d4;
      padding: 10px 0;
      & > div {
        border-right: 1px solid #ebeef5;
      }
    }
    .tr {
      display: flex;
      padding: 10px 0;
      align-items: center;
      & > div {
        border-right: 1px solid #ebeef5;
        &:last-of-type {
          border: none;
        }
      }
    }
  }
  .lineChat {
    width: 770px;
    height: 400px;
  }
}
.tit {
  text-align: center;
  margin-bottom: 30px;
}
</style>
